<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<!-- 定位，元素正确布局
			 ①浮动定位：左右布局
			 ②相对定位：微调布局针对单一元素  
			 position：relative；声明元素进行相对定位
			 特点：相对于父级进行定位，不脱离文档流
			 附加属性：方向属性：left、top、right、bottom，
			 属性值：正负数值px
					Z轴叠加属性：z-index--属性值：数值、数值越大，越靠前
					
			 ③绝对定位：叠加效果，通常与相对定位搭配使用,左栏、侧边栏、遮罩层
					   左栏---挂靠点
			 position：absolute；声明元素进行绝对定位
			 特点：相对于祖先【页面左上顶角】进行定位、
			      如果有父元素，按照父元素【左上顶角】、脱离文档流
			 使用方法：通常与相对定位搭配使用
			 ④固定定位：fiexd 页面区域固定在页面上
					  相对、绝对、固定属性--附加属性全部通用：方向、叠加属性
			 ⑤文档流定位：按照元素分类进行定位：块与块【纵排】
											 行与行【横排】
											 块与块【横排】
		 -->
		 <style>
			/*.box1和box2 300*300 背景颜色 加相对定位*/
			div{
				width: 300px;
				height: 300px;
			}
			div.box1{
				 background: url(img/img1.png);
				 background-size: 100%;
				 /* 相对定位，相对于就近父级 */
				 position: absolute;
				 left: 0px;
				 top: 0px;
				 /* 叠加属性 */
				 z-index: 2;
			 }
			div.box2{
			 	 background: url(img/img4.png);
				 background-size: 100%;
				 position: absolute;
				 left: 0px;
				 top: 0px;
				 z-index: 1;
			 }
		 </style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
<!-- 
 main div.小米明星单品 div.商品 div.下半部 div.产品5{
 		width: 211px;
 		height: 307px;
 		background: #fafafa;
 		/* rgba() tackcolor */
 		border-top: 1.2px solid #55aa00;
 		text-align: center;
 		margin-left: 15px;
 		float: left;
 }
 main div.小米明星单品 div.商品 div.下半部 div.产品5 dl dt img{
 		margin-top: 10px;
 }
 main div.小米明星单品 div.商品 div.下半部 div.产品5 dl dd.商品描述{
 		margin-top: 30px;
 }
 main div.小米明星单品 div.商品 div.下半部 div.产品5 dl dd.product_content{
 		line-height: 43px;
 		font-size: 14px;
 		color: #a6a6a6;
 		margin-top: 35px;
 }
 main div.小米明星单品 div.商品 div.下半部 div.产品5 dl dd.product_price{
 		font-size: 14px;
 		color: #ffa70f;
 		line-height: 90px;
 }
 
 -->